<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>查看及编辑政策分类</title>
        <script src="/lib/axios.js"></script>
        <script src="/lib/vue.js"></script>
        <link rel="stylesheet" href="/lib/elementindex.css">
        <script src="/lib/elementindex.js"></script>
        <style>
            .el-tag+.el-tag {
			margin-left: 10px;
		}

		.button-new-tag {
			margin-left: 10px;
			height: 32px;
			line-height: 30px;
			padding-top: 0;
			padding-bottom: 0;
		}

		.input-new-tag {
			width: 90px;
			margin-left: 10px;
			vertical-align: bottom;
		}
	</style>
    </head>

    <body>
        <div id="app" style="width:100%">
            <el-form>
                <el-tabs v-model='activeTab'>
                    <el-tab-pane label="基本信息" name="rbasic">
                        <hc-rule-basic :ruledef='ruleDef'></hc-rule-basic>
                    </el-tab-pane>
                    
                    <el-tab-pane label="规则配置" name="config">
                        <el-collapse value='functions'>
                            <el-collapse-item>
                                <template slot="title">
                                    <span style="font-size:larger;font-weight: bold;">导入代码库</span>
                                </template>

                                <el-table :data="ruleDef.imports" style="width: 100%;margin-bottom: 20px;" border>
                                    <el-table-column label="代码库">
                                        <template slot-scope="scope">
                                            <el-input v-model.trim="scope.row.code" placeholder='package name'></el-input>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="说明">
                                        <template slot-scope="scope">
                                            <el-input v-model.trim="scope.row.name" placeholder='需要的话可填写说明'>
                                                </el-checkbox>
                                        </template>
                                    </el-table-column>

                                    <!--                                    <el-table-column label="包括所有(*)">
                                        <template slot-scope="scope">
                                            <el-checkbox v-model.trim="scope.row.markAll">.*</el-checkbox>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="静态(static)">
                                        <template slot-scope="scope">
                                            <el-checkbox v-model.trim="scope.row.markStatic">static </el-checkbox>
                                        </template>
                                    </el-table-column> -->

                                    <el-table-column label="操作" min-width="100px">
                                        <template slot="header">
                                            <span>操作</span>
                                            <el-button size="mini" type="success" @click="handleTableRowCommand(ruleDef.imports,-1,0,{})">追加一行
                                            </el-button>
                                        </template>
                                        <template slot-scope="scope">
                                            <el-button size='mini' @click="handleTableRowCommand(ruleDef.imports,scope.$index,0,{})"
                                                placeholder="">干</el-button>
                                            <!--                <el-button size='mini' @click="handleTableRowCommand(ruleDef.imports,scope.$index+1,0,{})">士
                                            </el-button> -->
                                            <el-button size='mini' @click="handleTableRowCommand(ruleDef.imports,scope.$index,1)">X
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-collapse-item>

                            <el-collapse-item name="functions">
                                <template slot="title">
                                    <span style="font-size:larger;font-weight: bold;">自定义函数列表</span>
                                </template>

                                <el-table :data="ruleDef.list" style="width: 100%;margin-bottom: 20px;" row-key="id"
                                    border :default-sort="{prop: 'id', order: 'ascending'}">
                                    <el-table-column label="函数名称" sortable prop="code">
                                        <template slot-scope="scope">
                                            <el-input v-if="scope.row.editable" v-model.trim="scope.row.code"
                                                placeholder="函数名称是函数的标识符"></el-input>
                                            <span v-else>{{scope.row.code}}</span>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="函数说明">
                                        <template slot-scope="scope">
                                            <el-input v-if="scope.row.editable" v-model="scope.row.name" type="textarea"
                                                :autosize="{ minRows: 1, maxRows: 2}" placeholder="描述信息"></el-input>
                                            <span v-else>{{scope.row.name}}</span>
                                        </template>
                                    </el-table-column>

                                    <el-table-column type="expand" label="详情">
                                        <template slot-scope="scope">
                                            <el-row size='mini'>
                                                <el-col :span='2'>形参:</el-col>
                                                <el-col :span='22'>
                                                    <el-tag type='info' size='small' :key="scope.row.id+'_'+tag.id"
                                                        v-for="tag in scope.row.args" :closable="scope.row.editable"
                                                        @close="handleArgClose(scope.row.args,tag)">
                                                        {{tag.code}}
                                                    </el-tag>
                                                    <el-input ref="saveTagInput" class="input-new-tag" v-if="scope.row.editable"
                                                        v-model="argInputValue" size='mini' @keyup.enter.native="handleArgInputConfirm(scope.row.args)"
                                                        @blur="handleArgInputConfirm(scope.row.args)" placeholder="+新入参">
                                                    </el-input>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span='2'>脚本:</el-col>
                                                <el-col :span='22'>
                                                    <hc-groovy-editor :panel='false' :maxlines="18" :minlines='6'
                                                        :readonly='!scope.row.editable' v-model="scope.row.script"></hc-groovy-editor>
                                                </el-col>
                                            </el-row>
                                        </template>
                                    </el-table-column>

                                    <el-table-column label="操作" min-width="100px">
                                        <template slot="header">
                                            <span>操作</span>
                                            <el-button size="mini" type="success" @click="handleAppendFunc">新建函数
                                            </el-button>
                                        </template>

                                        <template slot-scope="scope">
                                            <el-button size="mini" @click="triggerToggleStatus(scope.row)" type='primary'>
                                                <span v-if="scope.row.editable">保存</span><span v-else>编辑</span>
                                            </el-button>
                                            <el-button size="mini" @click="triggerTestRow(scope.row)" type='primary'>TEST
                                            </el-button>

                                            <el-button size="mini" @click="handleDeleteFunc(scope.$index)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-collapse-item>

                        </el-collapse>
                        <el-form-item label="">
                            <el-button type="primary" @click='handleUpdateRuleEvent'>保存修改</el-button>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="规则测试" name="test">
                        <hc-test :rpath="ruleDef.rpath" :inputs='testCmdArgs' @save-inputs="ruleDef.rtest = $event"></hc-test>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </div>

        <script src="/lib/ace-noconflict/ace.js"></script>
        <script src="/lib/ace-noconflict/ext-language_tools.js"></script>
        <link rel="stylesheet" href="/com/hc-groovy-editor.css" />
        <link rel="stylesheet" href="/com/hc-lang-editor.css"/>
        <script type='module'>
            import * as $util from '/lib/hc-util.js'
            import * as $rest from '/lib/hc-rest-service.js'
            import {} from '/com/hc-test.js'
            import {} from '/com/hc-rule-basic-properties.js'
            import {} from '/com/hc-groovy-editor.js'
            
            var initialRuleDef = '';

            $rest.check$pinfoOrLoad(function() {
                $rest.obtainRuleDefByRpath($pinfo.pcode() + '/Func',
                    function(ruleDef) {
                        initvm(ruleDef);
                    });
            }, 'xsxdjc/Main');

            function initvm(ruleDef) {
                ruleDef.list.forEach(it => it.editable = false);
                initialRuleDef = JSON.stringify(ruleDef)
                window.vm = new Vue({
                    el: '#app',
                    data: {
                        activeTab: 'config',
                        testCmdArgs: ruleDef.rtest,
                        argInputValue: "",
                        ruleDef: ruleDef
                    },
                    methods: {
                        handleAppendFunc: function() {
                            let id = ++vm.ruleDef.rmaxid;
                            let newfun = {
                                id: id,
                                code: "funcName" + id,
                                name: "",
                                args: [],
                                script: "",
                                editable: false
                            };
                            vm.ruleDef.list.push(newfun)
                            onToggleStatus(newfun);
                        },
                        handleDeleteFunc: function(index) {
                            this.ruleDef.list.splice(index, 1)
                        },
                        handleTableRowCommand: onTableRowCommand,
                        handleUpdateRuleEvent: function() {
                            $rest.updateRuleDefInVm(this);
                        },
                        triggerTestRow: onTestRow,
                        triggerToggleStatus: onToggleStatus,
                        handleArgClose(args, tag) {
                            args.splice(args.indexOf(tag), 1)
                        },
                        handleArgInputConfirm(args) {
                            let inputValue = this.argInputValue;
                            if (inputValue) {
                                args.push({
                                    id: args.length,
                                    code: inputValue,
                                    name: '',
                                    type: 'auto'
                                });
                            }
                            this.argInputValue = '';
                        },
                    },
                    beforeDestroy: function() {
                        console.log('beforeDestory')
                    },
                    mounted: function() {
                        console.log('mounted')
                    }
                }); //end of new vm
            };

            function onTableRowCommand(table, start, deleted, newrow) {
                if (start == -1) start = table.length;
                if (newrow == undefined) {
                    table.splice(start, deleted);
                } else {
                    newrow.id = $util.maxOfProp(table, 'id') + 1; 
                    table.splice(start, deleted, newrow);
                };
            }

            function onTestRow(row) {
                let current = JSON.stringify(vm.ruleDef)
                if (current != initialRuleDef) {
                    console.log('automate to save for test')
                    vm.handleUpdateRuleEvent();
                    initialRuleDef = current;
                }

                let testCmdArgs = {};
                testCmdArgs['_func_'] = row.code;
                row.args.forEach(it => testCmdArgs[it.code] = null);
                vm.testCmdArgs = testCmdArgs;
                vm.activeTab = 'test'
            }

            var currentRow

            function onToggleStatus(row) {
                if (currentRow != undefined && row != currentRow && currentRow.editable) {
                    currentRow.editable = false;
                }
                row.editable = !row.editable;
                currentRow = row;
            }
        </script>
    </body>
</html>
